<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Simple Admin</title>
    <!-- Import all the bootstrap css files from css folder -->
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />

    <!-- Logo -->
    <link rel="simpleadmin-logo" href="favicon.ico" />

    <!-- Import BootStrap Javascript -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/alpinejs.min.js" defer></script>

    <style>
      .form-switch .form-check-input {
        width: 2.4em;
        height: 1.2em;
      }
    </style>
  </head>
  <body>
    <main>
      <div class="container my-4" x-data="simpleWatchCat()">
        <nav class="navbar navbar-expand-lg mt-2">
          <div class="container-fluid">
            <a class="navbar-brand" href="/"
              ><span class="mb-0 h4">Simple Admin</span></a
            >
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarText"
              aria-controls="navbarText"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
              <ul class="navbar-nav me-auto mb-2 ml-4 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" href="/">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/network.html">Simple Network</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/scanner.html">Simple Scan</a>
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link active"
                    href="/settings.html"
                    aria-current="page"
                    >Simple Settings</a
                  >
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/sms.html">SMS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/console">Console</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/deviceinfo.html"
                    >Device Information</a
                  >
                </li>
              </ul>
              <span class="navbar-text">
                <button class="btn btn-link text-reset" id="darkModeToggle">
                  Dark Mode
                </button>
              </span>
            </div>
          </div>
        </nav>
        <div class="row mt-3 mb-4">
          <div class="col">
            <div class="card">
              <div class="card-header">Simple Watchcat</div>
              <div class="card-body">
                <div class="card-text">
                  <div class="row mt-3 mb-5 align-content-center mx-4">
                    <div class="col">
                      <div class="mt-3">
                        <label> Enable Watchcat </label>
                      </div>
                    </div>
                    <div class="col-5">
                      <div class="mt-2">
                        <div class="form-check form-switch form-switch-lg">
                          <input
                            class="form-check-input"
                            type="checkbox"
                            role="switch"
                            id="watchCatSwitch"
                            x-model="watchCatStatus"
                            :disabled="!isFormComplete"
                            x-on:change="setWatchCatSettings"
                          />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="row mt-3 mb-3 align-items-center mx-4">
                    <div class="col">
                      <div class="mt-3 mb-4">
                        <label> Track IP </label>
                      </div>

                      <div class="mt-3 mb-4">
                        <label> Ping Request Timeout </label>
                      </div>

                      <div class="mt-3 mb-4">
                        <label> Ping Failure Amount </label>
                      </div>
                    </div>

                    <div class="col-5">
                      <div class="mt-3 mb-4">
                        <select
                          class="form-select"
                          aria-label="Select Site to Ping"
                          x-model="trackIP"
                        >
                          <option selected>Select IP</option>
                          <option value="223.5.5.5">223.5.5.5</option>
                          <option value="114.114.114.114">114.114.114.114</option>
                          <option value="119.29.29.29">119.29.29.29</option>
                          <option value="180.76.76.76">180.76.76.76</option>
                        </select>
                      </div>

                      <div class="mt-3 mb-4">
                        <input
                          type="number"
                          class="form-control"
                          aria-label="Ping Timeout"
                          aria-describedby="inputGroup-sizing-default"
                          placeholder="Enter Ping Timeout in Seconds."
                          x-model="pingTimeout"
                        />
                      </div>

                      <div class="mt-3 mb-4">
                        <input
                          type="number"
                          class="form-control"
                          aria-label="Sizing example input"
                          aria-describedby="inputGroup-sizing-default"
                          placeholder="Enter Ping Failure Amount."
                          x-model="pingFailureCount"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                Still under development. Coming soon...
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-3 mb-3">
          <div class="col">
            <div class="card">
              <div class="card-header">Simple Watchcat Logs</div>
              <div class="card-body">
                <div class="card-text">
                  <div class="form-floating">
                    <textarea
                      class="form-control"
                      placeholder="Leave a comment here"
                      id="floatingTextarea2"
                      style="height: 100px"
                      x-text="response"
                      readonly
                    ></textarea>
                    <label for="floatingTextarea2">Logs</label>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                No log is provided when successfully enabling the watchcat.
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="js/dark-mode.js"></script>
    <script>
      function simpleWatchCat() {
        return {
          watchCatStatus: false, // Initialize as false (not enabled)
          trackIP: "",
          pingTimeout: "",
          pingFailureCount: "",
          response: "",

          setWatchCatSettings() {
            fetch(
              "/cgi-bin/watchcat_maker?" +
                new URLSearchParams({
                  WATCHCAT_ENABLED: this.watchCatStatus ? "enable" : "disable",
                  TRACK_IP: this.trackIP,
                  PING_TIMEOUT: this.pingTimeout,
                  PING_FAILURE_COUNT: this.pingFailureCount,
                })
            )
              .then((response) => response.text()) // Convert response to text
              .then((data) => {
                this.response = data; // Store the response data
                console.log(data); // Log the response for debugging
              })
              .then(() => {
                this.fetchWatchCatSettings();
              })
              .catch((error) => {
                console.error("Error:", error); // Handle any errors
                this.response = "An error occurred.";
              });
          },

          // Computed property to check if the form is complete
          get isFormComplete() {
            return (
              this.trackIP !== "" &&
              this.pingTimeout !== "" &&
              this.pingFailureCount !== ""
            );
          },

          // Fetch the current watchcat settings
          fetchWatchCatSettings() {
            fetch("/cgi-bin/get_watchcat_status")
              .then((response) => {
                if (!response.ok) {
                  throw new Error("Network response was not ok");
                }
                return response.json(); // Parse response as JSON
              })
              .then((data) => {
                console.log(data); // Log the parsed data for debugging

                // Check if the JSON is not empty
                if (data) {
                  this.watchCatStatus = data.enabled === true;
                  this.trackIP = data.track_ip;
                  this.pingTimeout = data.ping_timeout;
                  this.pingFailureCount = data.ping_failure_count;
                }
              })
              .catch((error) => {
                console.error("Error:", error); // Handle any errors
                this.response = "An error occurred.";
              });
          },

          init() {
            this.fetchWatchCatSettings();
          },
        };
      }
    </script>
  </body>
</html>
